<template>
  <div id="detail">
    <detail-navbar class="detail-nav" @titleClick="titleClick" ref="detailNavbar"/>
    <scroll class="content" :pull-up-load="true" :probe-type="3" ref="scroll" @scroll="contentScroll">
      <detail-swiper :topImages="topImages"/>
      <detail-base-info :goods="goods"/>
      <detail-shop-info :shop="shop"/>
      <detail-goods-info :detail-info="detailInfo" @imageLoad="imageLoad"/>
      <detail-param-info :paramInfo="paramInfo" ref="detailParamInfo"/>
      <detail-comment-info :commentInfo="commentInfo" ref="detailCommentInfo"/>
      <goods-list :goods="recommends" ref="goodsList"/>
    </scroll>
    <detail-bottom-bar @addCart="addToCart"/>
    <back-top @click="backTop" v-show="isShowBackTop"/>
  </div>
</template>

<script>
import detailNavbar from './child_comps/detail_navbar.vue'
import detailSwiper from './child_comps/detail_swiper.vue'
import detailBaseInfo from './child_comps/detail_baseinfo.vue'
import detailShopInfo from './child_comps/detail_shopinfo.vue'
import detailGoodsInfo from './child_comps/detail_goodsinfo.vue'
import detailParamInfo from './child_comps/detail_paraminfo.vue'
import detailCommentInfo from './child_comps/detail_commentinfo.vue'
import detailBottomBar from './child_comps/detail_bottombar.vue'

import { throttle } from 'assets/js/common'

import scroll from 'components/common/scroll/scroll'
import goodsList from 'components/content/goods/goods_list'
import backTop from 'components/content/back_top/back_top.vue'

import { getDetail, Goods, Shop, GoodsParam, getRecommend } from 'network/detail'

import { mapActions } from 'vuex'

export default {
  name: "detail",
  components: {
    detailNavbar,
    detailSwiper,
    detailBaseInfo,
    detailShopInfo,
    detailGoodsInfo,
    detailParamInfo,
    detailCommentInfo,
    detailBottomBar,
    scroll,
    goodsList,
    backTop
  },
  data() {
    return {
      iid: null,
      topImages: [],
      goods: {},
      shop: {},
      detailInfo: {},
      paramInfo: {},
      commentInfo: {},
      recommends: [],
      themeTopY: [], // 确定每个title的位置
      ifTitleClick: false,
      timer: null,
      isShowBackTop: false  // 判断是否显示返回顶部按钮
    }
  },
  created() {
    // 保存传入的iid
    this.iid = this.$route.params.iid

    // 根据iid请求详情数据
    getDetail(this.iid).then(res => {
      const data = res.data.result;
      // 1.获取顶部的图片轮播图数据
      this.topImages = data.itemInfo.topImages;

      // 2.获取商品信息
      this.goods = new Goods(data.itemInfo, data.columns, data.shopInfo.services);

      // 3.创建店铺信息
      this.shop = new Shop(data.shopInfo);

      // 4.保存商品的详情数据
      this.detailInfo = data.detailInfo;

      // 5.获取参数的信息
      this.paramInfo = new GoodsParam(data.itemParams.info, data.itemParams.rule);

      // 6.获取评论的信息
      if(data.rate.cRate !== 0) {
        this.commentInfo = data.rate.list[0];
      }
    })

    // 请求推荐数据
    getRecommend().then(res => {
      this.recommends = res.data.data.list;
    })
  },
  methods: {
    ...mapActions([
      'addCart',
    ]),
    // 方法: 刷新图片加载
    imageLoad() {
      this.$refs.scroll.scroll.refresh();
    },
    // 方法: 点击title栏, 界面移动
    titleClick(index) {
      // 获取各个title栏的最新位置
      if(this.ifTitleClick == false) {
        this.firstGetThemeTopY();
      } else if(this.ifTitleClick == true) {
        this.getThemeTopY();
      }

      // 移动到对应位置
      this.$refs.scroll.scrollTo(0, -this.themeTopY[index], 300);
    },
    // 方法: 下滑时自动触发
    contentScroll(position) {
      // 获取各个title栏的最新位置, 并进行防抖处理
      if(this.ifTitleClick == false) {
        this.firstGetThemeTopY();
      } else if(this.ifTitleClick == true) {
        this.tGetThemeTopY();
      }
      
      if(-position.y < this.themeTopY[1]) {
        this.$refs.detailNavbar.currentIndex = 0;
      }
      else if (-position.y >= this.themeTopY[1] && -position.y < this.themeTopY[2]) {
        this.$refs.detailNavbar.currentIndex = 1;
      }
      else if (-position.y >= this.themeTopY[2] && -position.y < this.themeTopY[3]) {
        this.$refs.detailNavbar.currentIndex = 2;
      }
      else if (-position.y >= this.themeTopY[3]) {
        this.$refs.detailNavbar.currentIndex = 3;
      }

      // 判断backtop是否显示
      this.isShowBackTop = ((-position.y) > 1000);
    },
    // 初次获取title栏位置时，需补上导航栏高度
    getThemeTopY() {
      this.themeTopY = [];
      this.themeTopY.push(0);
      this.themeTopY.push(this.$refs.detailParamInfo.$el.offsetTop);
      this.themeTopY.push(this.$refs.detailCommentInfo.$el.offsetTop);
      this.themeTopY.push(this.$refs.goodsList.$el.offsetTop);
    },
    firstGetThemeTopY() {
      this.themeTopY = [0, this.$refs.detailParamInfo.$el.offsetTop - 44, this.$refs.detailCommentInfo.$el.offsetTop - 44, this.$refs.goodsList.$el.offsetTop - 44];
      this.ifTitleClick = true;
    },
    // 获取title栏位置(防抖)
    tGetThemeTopY: throttle(function () {
      this.getThemeTopY();
    }, 5000),
    // 方法: 点击返回顶部图标时触发
    backTop() {
      this.$refs.scroll.scroll.scrollTo(0, 0, 300);
    },
    // 方法: 加入购物车
    addToCart() {
      // 获取商品信息
      const product = {};
      product.image = this.topImages[0];
      product.title = this.goods.title;
      product.desc = this.goods.desc;
      product.price = this.goods.newPrice;
      product.oldPrice = this.goods.oldPrice;
      product.iid = this.iid;

      // 将商品添加到购物车, 并显示弹窗
      this.addCart(product).then(res => {
        this.$TOAST.show(res, 1500)
      })
    }
  }
}
</script>

<style scoped>
  #detail {
    height: 100vh;
    position: relative;
    z-index: 100;
    background-color: #fff;
    overflow: hidden;
  }

  .detail-nav {
    position: relative;
    z-index: 101;
    background-color: #fff;
  }

  .content {
    height: calc(100% - 44px - 53px);
  }
</style>